<template>
	<view class="main">
		<view class="top">
			<view class="top_Fixed" :style="{'height':statusBarHeight+'px'}"></view>
			<view class="top_row">
				<view class="top_left flex_left" @click="back()">
					<image class="back_icon" src="/static/img/back.png"></image>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="login_title flex_left">
				<view class="login_type" :class="item.id == typeId ? 'login_typeX' : ''" v-for="item in typeList"
					:key="item.id" @click="changeType(item)">{{item.name}}</view>
			</view>
			<!-- 邮箱 -->
			<view class="input_row flex_left" v-if="typeId == '1'">
				<input type="text" placeholder="Enter your email" v-model="email" maxlength="30"
					placeholder-class="inp_placeholder" />
			</view>
			<!-- 验证码 -->
			<view class="input_row flex_between" v-if="typeId == '1'">
				<input type="number" placeholder="Enter verification code" v-model="emailCode" maxlength="8"
					placeholder-class="inp_placeholder" style="width: 40%;" />
				<view class="get_code flex_center" v-if="!sendFlag" @click="getCode()">Verification code</view>
				<view class="get_code_send flex_center" v-if="sendFlag">{{second}}s Resend</view>
			</view>
			<!-- 手机号 -->
			<view class="input_row flex_left" v-if="typeId == '2'">
				<view class="num_box flex_center">+256</view>
				<input type="number" placeholder="Enter your phone number" v-model="phone" maxlength="20"
					placeholder-class="inp_placeholder" />
			</view>
			<!-- 密码 -->
			<view class="input_row flex_left">
				<input :password="isPassword" placeholder="Input password" v-model="password" maxlength="20"
					placeholder-class="inp_placeholder" />
				<image class="look_icon" src="/static/img/look.png" v-if="!isPassword" @click="isPassword = true">
				</image>
				<image class="look_icon" src="/static/img/look_not.png" v-if="isPassword" @click="isPassword = false">
				</image>
			</view>

			<view class="login_now flex_center" @click="sign()">Sign up</view>
		</view>
	</view>
</template>

<script>
	import {
		req_
	} from '../../api/api.js';
	export default {
		data() {
			return {
				statusBarHeight: 0,
				typeId: '1',
				typeList: [{
					id: '1',
					name: 'Email'
				}, {
					id: '2',
					name: 'Mobile'
				}],
				email: '',
				emailCode: '',
				phone: '',
				password: '',
				isPassword: true,
				sendFlag: false,
				second: 0,
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		onShow() {

		},
		methods: {
			// 注册邮箱
			signEmail() {
				let that = this
				if(!that.email){
					that.utils.toast('Please enter your email')
					return
				}
				if(!that.emailCode){
					that.utils.toast('Please enter your Verification code')
					return
				}
				if(!that.password){
					that.utils.toast('Please enter your password')
					return
				}
				that.utils.To('/pages/index/index')
			},
			// 注册手机号
			signPhone() {
				let that = this
				if(!that.phone){
					that.utils.toast('Please enter your phone number')
					return
				}
				if(!that.password){
					that.utils.toast('Please enter your password')
					return
				}
				that.utils.To('/pages/index/index')
			},
			// 注册
			sign() {
				if(this.typeId == '1'){
					this.signEmail()
				} else {
					this.signPhone()
				}
			},
			// 获取验证码
			getCode(){
				let that = this
				that.second = 59
				that.sendFlag = true
				that.timer = setInterval(function() {
					if (that.second > 0) {
						that.second = that.second - 1
					} else {
						that.second = 0
						that.sendFlag = false
						clearInterval(that.timer)
					}
				}, 1000)
			},
			// 切换注册
			changeType(val) {
				this.typeId = val.id
			},
			back() {
				this.utils.Back()
			}
		},
		onReachBottom() {

		},
		onPullDownRefresh() {

		}
	}
</script>

<style scoped>
	.login_title {
		padding: 300rpx 0 26rpx 0;
		width: 92%;
		margin: 0 auto;
	}

	.login_type {
		margin-right: 120rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000
	}

	.login_typeX {
		color: #34BA78;
	}

	.input_row {
		position: relative;
		margin: 50rpx auto;
		width: 92%;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 40rpx;
	}

	.num_box {
		width: 130rpx;
		height: 37rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #201B1C;
		border-right: 1rpx solid #E2E2E2;
	}

	.input_row input {
		margin-left: 42rpx;
		width: 70%;
	}

	.look_icon {
		position: absolute;
		right: 42rpx;
		width: 38rpx;
		height: 26rpx;
	}

	.login_now {
		margin: 77rpx auto;
		width: 92%;
		height: 80rpx;
		background: #34BA78;
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	
	.get_code {
		width: 250rpx;
		height: 20rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #34BA78;
		border-left: 1rpx solid #E2E2E2;
	}
	
	.get_code_send {
		width: 250rpx;
		height: 20rpx;
		color: #AFB3C4;
	}
</style>